<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <style type="text/css">
            h2{
                margin: 0;     
                color: #666;
                padding-top: 90px;
                font-size: 52px;
                font-family: "trebuchet ms", sans-serif;    
            }
            .item{   
                text-align: center;
                height: 350px !important;
            }
        </style>        
    </h:head>
    <body>
        <div class="bs-example">
            <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
                <!-- Carousel indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>   
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item">
                        <h2>Slide 1</h2>
                        <div class="carousel-caption">
                            <h3>First slide label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                    </div>
                    <div class="item">
                        <h2>Slide 2</h2>
                        <div class="carousel-caption">
                            <h3>Second slide label</h3>
                            <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                        </div>
                    </div>
                    <div class="item">
                        <h2>Slide 3</h2>
                        <div class="carousel-caption">
                            <h3>Third slide label</h3>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </div>
                    </div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </body>
</html>     
